<template>
	<div style="position: relative;width: 100%;height: 990px;display: flex;justify-content: space-between;"
		class="pad20">

		<div style="flex: 3;" class="ml15">
			<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
				<div class="inset-box">无废成效</div>
			</div>

			<div class="mt15" style="display: flex;justify-content: space-between;">
				<div style="flex:1;height: 900px;">
					<div style="width: 100%;line-height: 51px;background: linear-gradient(270deg, #0B3383, #1649A4);"
						class="colorfff textCenter font20">
						项目
					</div>

					<div style="width: 100%;height: 830px;" class="mt20">

						<div style="background: #041C62;height: 188px;">
							<div style="width: 176px;height: 188px;background-size: 100%;margin: 20px auto 0;"
								class="textCenter"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
								<div style="font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;color: #FFFFFF;
									background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
									-webkit-background-clip: text;-webkit-text-fill-color: transparent;padding-top: 40px;">
									清洁生产
								</div>
							</div>
						</div>

						<div style="background: #041C62;height: 188px;">
							<div style="width: 176px;height: 188px;background-size: 100%;margin: 20px auto;" class="textCenter"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
								<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;
								font-size: 24px;color: #FFFFFF;background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
								-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
									减量化
								</div>
							</div>
						</div>

						<div style="background: #041C62;height: 188px;">
							<div style="width: 176px;height: 188px;background-size: 100%;margin: 20px auto;" class="textCenter"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
								<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;
								color: #FFFFFF;background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
								-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
									无害化
								</div>
							</div>
						</div>

						<div style="background: #041C62;height: 188px;">
							<div style="width: 176px;height: 188px;background-size: 100%;margin: 20px auto;" class="textCenter"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
								<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;color: #FFFFFF;
								background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
								-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
									资源化
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style="flex:1;height: 900px;" class="ml20">
					<div style="width: 100%;line-height: 51px;background: linear-gradient(270deg, #0B3383, #1649A4);"
						class="colorfff textCenter font20">
						预期经济效益
					</div>

					<div style="background: #041C62;height: 815px;" class="textCenter pt15 mt15">
						<div v-for="(item,index) in plans" style="height: 208px;" v-if="index != 4">
							<div v-for="(item2,index2) in item.planEconEffectList" class="colorfff font16 mb15">
								<span v-for="(item3,index3) in item2.split(/(?=[0-9])/)"  
								:class="[(!isNaN(item3) && !isNaN(parseFloat(item3)) && isFinite(item3))?'NumberClass':'333']">{{item3}}</span>
							</div>
						</div>
					</div>
				</div>

				<div style="flex:1;height: 900px;" class="ml20">
					<div style="width: 100%;line-height: 51px;background: linear-gradient(270deg, #0B3383, #1649A4);"
						class="colorfff textCenter font20">
						目前经济效益
					</div>

					<div style="background: #041C62;height: 815px;" class="textCenter pt15 mt15">
						<div v-for="(item,index) in plans" style="height: 208px;" v-if="index != 4">
							<div v-for="(item2,index2) in item.actualEconEffectList" class="colorfff font16 mb15">
								<span v-for="(item3,index3) in item2.split(/(?=[0-9])/)"
								:class="[(!isNaN(item3) && !isNaN(parseFloat(item3)) && isFinite(item3))?'NumberClass':'333']">{{item3}}</span>
							</div>
						</div>
					</div>
				</div>


				<div style="flex:1;height: 900px;" class="ml20">
					<div style="width: 100%;line-height: 51px;background: linear-gradient(270deg, #0B3383, #1649A4);"
						class="colorfff textCenter font20">
						预期环境效益
					</div>

					<div style="background: #041C62;height: 815px;" class="textCenter pt15 mt15">
						<div v-for="(item,index) in plans" style="height: 208px;" v-if="index != 4">
							<div v-for="(item2,index2) in item.planEnvEffectList" class="colorfff font16 mb15">
								<span v-for="(item3,index3) in item2.split(/(?=[0-9])/)"
								:class="[(!isNaN(item3) && !isNaN(parseFloat(item3)) && isFinite(item3))?'NumberClass':'333']">{{item3}}</span>
							</div>
						</div>
					</div>
				</div>

				<div style="flex:1;height: 900px;" class="ml20">
					<div style="width: 100%;line-height: 51px;background: linear-gradient(270deg, #0B3383, #1649A4);"
						class="colorfff textCenter font20">
						目前环境效益
					</div>

					<div style="background: #041C62;height: 815px;" class="textCenter pt15 mt15">
						<div v-for="(item,index) in plans" style="height: 208px;" v-if="index != 4">
							<div v-for="(item2,index2) in item.actualEnvEffectList" class="colorfff font16 mb15">
								<span v-for="(item3,index3) in item2.split(/(?=[0-9])/)"
								:class="[(!isNaN(item3) && !isNaN(parseFloat(item3)) && isFinite(item3))?'NumberClass':'333']">{{item3}}</span>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<img src="../../assets/bigScreen/icon34.png"
			style="width: 665px;height: 392px;position: absolute;top: 0%;left: 0%;" />
		<img src="../../assets/bigScreen/icon37.png"
			style="width: 665px;height: 392px;position: absolute;bottom: 0%;left: 0%;" />
		<img src="../../assets/bigScreen/icon38.png"
			style="width: 665px;height: 392px;position: absolute;top: 0%;right: 0%;" />
		<img src="../../assets/bigScreen/icon39.png"
			style="width: 665px;height: 392px;position: absolute;bottom: 0%;right: 0%;" />
	</div>
</template>

<script>
	let that
	export default {
		name: 'ZeroWasteTimeline',
		data() {
			return {
				timeline: [],
				plans: []
			}
		},

		mounted: function() {
			that = this
			that.getDetList()
		},

		methods: {

			getDetList() {
				that.ajax({
					url: '/noWaste/effect/getList',
					data: {

					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						for (let item of res.data) {
							for (let item2 of item.planEconEffectList) {
								let numbers = item2.match(/\d+/g)
								if (numbers.length) {}
							}
						}
						that.plans = res.data
					},
				})
			},


		}
	}
</script>

<style scoped>
	.inset-box {
		background-image: url('../../assets/bigScreen/icon6.png');
		width: 140px;
		height: 32px;
		line-height: 32px;
		padding-left: 11px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18px;
		color: #FFFFFF;
	}

	.inset-box::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		right: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	
	.NumberClass{
		color: #00FFFD;
		font-weight: bold;
		font-size: 20px;
	}
	
</style>